.nav-container {
  background: #167be0;
  color: #fff;
  user-select: none;
  font-size: 14px;

  .nav-ul {
    margin: 0;
    padding: 0 10px;
    align-items: center;
    height: 100%;
    white-space: nowrap;
    overflow-x: auto;

    .nav-li {
      list-style: none;
      height: 100%;
      display: inline-block;
      align-items: center;

      &:hover .panel-mount {
        display: block;
      }
    }
  }
}

.nav-btn {
  color: currentColor;
  text-decoration: none;
  padding: 0 10px;
  height: 100%;
  display: flex;
  align-items: center;
}

.btn-bg-hover:hover {
  background: rgba(0, 0, 0, 0.05);
}

.btn-color-hover:hover {
  color: #1890ff;
}

.panel-mount {
  width: 0;
  height: 0;
  display: none;
}

.nav-panel {
  position: absolute;
  background: #fff;
  color: #fd0000;
  padding: 8px;
  line-height: 1.2;
  white-space: nowrap;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.12);

  .nav-list {
    display: block;
    color: #434E59;
    padding: 0;
    min-width: 100px;

    > li {
      display: block;
      font-size: 14px;
      line-height: 25px;
      color: #434E59;
      margin: 6px 0;
    }
  }

  .nav--panel {
    display: block;
    color: #434E59;
    padding: 0;
    min-width: 100px;

    > li {
      font-size: 14px;
      display: inline-block;
      line-height: 25px;
      color: #434E59;
      vertical-align: top;
      .nav-list {
        padding-left: 16px;
      }
    }
  }
}

.diamond-wrapper {
  width: 8px;
  height: 8px;
  margin: 4px;
  background: #262626;
  transform: rotate(-45deg);
  transform-origin: 50% 50%;
  display: inline-block;
}